<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="telephone=none" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta name="keywords" content="泰尔生物,砸金蛋" />
    <meta name="description" content="泰尔生物-庆国庆贺中秋,泰尔来送礼" />
    <title>砸金蛋赢大奖</title>
    <link rel="stylesheet" href="css/zadan.css">
    <script type="text/javascript">
        //手机自适应方案 rem
        (function (doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.getBoundingClientRect().width;
              if (!clientWidth) return;
              docEl.style.fontSize = 100 * (clientWidth/750) + 'px';
            };
          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
</head>  
<body class="zadan-body">
    <!--页面加载等待 -->
    <div class="loading-overlay">
        <img src="image/loading.svg" alt="数据加载中……">
    </div>
    <!--砸蛋次数用完的提示窗-->
    <div class="layer-toast">
        <p class="layer-content">你已经抽过奖了</p>
    </div>
    <!--logo-->
    <div class="zadan-logo">
        <img src="image/zadan-logo.png" alt="泰尔生物技术有限公司">
    </div>
    <!--音乐播放按钮-->
    <div class="music-icon on" id="musicBtn"></div>
    <audio id="backgroundAudio" autoplay loop>
        <source src="audio/background.mp3">
    </audio>
    <audio id="hitAudio">
        <source src="audio/hit.mp3">
    </audio>

    <!--舞台、旋转的金蛋-->
    <div class="stage" id="stage">
        <canvas id="myCanvas">  
            该浏览器不支持canvas元素。  
        </canvas>
        <div class="hit" id="hit"></div>
        <div class="gift-img" id="giftImg">
            <img src="image/third.png">
        </div>
    </div>

    <!--砸蛋次数 start-->
    <div class="zadan-count">
        你有<span class="count-text">0</span>次砸蛋机会
    </div>
    <!--砸蛋次数 end-->

    <!--我的中奖信息 start-->
    <div class="myprize-box">
        <!--若奖品已领取，.myprize-status加上 received 类-->
        您于<span>2017.9.15</span>抽到<span>一等奖</span>编号:<span>321451</span><span class="myprize-status">未领取</span>
    </div>
    <!--我的中奖信息 end-->

    <!--中奖名单 start-->
    <div class="winner-list-container">
        <div class="winner-list-box">
            <div class="list-tit">中奖名单</div>
            <div class="list-table">
                <div class="table-head">
                    <span>会员名</span>
                    <span>奖品</span>
                    <span>时间</span>
                </div>
                <div class="table-body">
                    <ul class="winner-list" id="winnerList">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--中奖名单 end-->

    <!--活动规则 start-->
    <div class="rule-box">
        <div class="rule-item">
            <span class="rule-item-tit">活动对象：</span>
            <p class="rule-item-content">新激活的高级消费商</p>
        </div>
        <div class="rule-item">
            <span class="rule-item-tit">奖品内容：</span>
            <p class="rule-item-content">一等奖(可邦 可韵 衍年骨晶男女各一瓶)；<br/>二等奖(衍年骨晶男女各一瓶)；<br/>三等奖(蛋白质粉一罐)。</p>
        </div>
        <div class="rule-item">
            <span class="rule-item-tit">中奖概率：</span>
            <p class="rule-item-content">100%</p>
        </div>
        <div class="rule-item">
            <span class="rule-item-tit">奖品使用：</span>
            <p class="rule-item-content">
                砸到奖品后，公司客服会在三天内与您取得联系，确定地址，给您发快递。
            </p>
        </div>
        <div class="rule-item">
            <span class="rule-item-tit">活动时间：</span>
            <p class="rule-item-content">
                2017年9月15日——2017年10月1日
            </p>
        </div>
        <div class="rule-item">
            <span class="rule-item-tit">温馨提示：</span>
            <p class="rule-item-content">高级消费商砸到奖品，推荐人可获得同样的奖品。</p>
        </div>
        <div class="rule-item">
            如有疑问，请联系官方客服电话400-089-9589
        </div>
        <div class="rule-item">
            本活动最终解释权归湖南泰尔生物技术有限公司所有
        </div>
    </div>
    <!--活动规则 end-->

    <!--砸蛋成功，获奖页面 start-->
    <div class="result-pop" id="resultPop">
        <div class="result-popcontainer">
            <div class="close-btn"></div>
            <div class="result-bgimg"></div>
            <div class="result-imgcontainer">
                <!--砸到的奖品图片-->
                <div class="gift-box">
                    <img src="image/third-gift.png">
                </div>
            </div>
            <div class="result-text">恭喜您，获得<span class="result">一等奖</span></div>
            <p class="result-prompt">请保持电话通畅，公司客服会与您联系</p>
            <p class="service-phone">官方客服电话400-089-9589</p>
        </div>
    </div>
    <!--砸蛋成功，获奖页面 end-->
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/fastclick.min.js"></script>
    <script src="js/zadan.js"></script>
</body>
</html>